<template>
	<div class="">
		<t-dialog placement="center" header="高级筛选" body="水平居中显示的对话框" :visible="isshow" @close="closefn" :footer="false" width="800px">
			<dk-divider style="margin: 10px 0"></dk-divider>
			<t-form ref="form" :rules="FORM_RULES" :data="formData" :colon="true" reset-type="initial" scrollToFirstError="smooth" @submit="onSubmit">
				<t-form-item label="任务编号" name="num">
					<t-input v-model="formData.num" placeholder="请输入任务编号" @enter="onEnter"></t-input>
				</t-form-item>

				<t-form-item label="任务名称" name="name">
					<t-input v-model="formData.name" placeholder="请输入任务名称" @enter="onEnter"></t-input>
				</t-form-item>
				<t-form-item label="场景话术" name="speech">
					<t-select v-model="formData.speech" placeholder="请选择场景话术">
						<t-option key="apple" label="Apple" value="apple" />
						<t-option key="orange" label="Orange" value="orange">OrangeContentSlot</t-option>
						<t-option key="banana" label="Banana" value="banana" />
					</t-select>
				</t-form-item>

				<t-form-item label="任务状态" name="taskstatus">
					<t-select v-model="formData.taskstatus" :options="statustaskoptions" placeholder="请选择任务状态">
					</t-select>
				</t-form-item>

				<t-form-item label="时间范围" name="nowtime" requiredMark>
					<t-date-range-picker v-model="formData.nowtime" :presets="presets"  :disableDate="disDate"/>
				</t-form-item>

				<div class="play_pause">
					<t-button theme="default" type="submit" @click="taskSubmit('Pause')">
						批量暂停任务
						<template #icon><PauseIcon /></template>
					</t-button>
					<t-button theme="default" type="submit" @click="taskSubmit('Startup')">
						批量开始任务
						<template #icon><PlayIcon /></template>
					</t-button>
				</div>
				<!-- <t-form-item class="buttonbut">
					<t-space size="small">
						<t-button theme="default" variant="base" type="reset">取消</t-button>
						<t-button theme="primary" type="submit">提交</t-button>
					</t-space>
				</t-form-item> -->
			</t-form>
		</t-dialog>
	</div>
	<taskList :isshow='visibleCenter' :tasktype="tasktype" @eventTaskList="clos"></taskList>
</template>

<script setup>
import { ref, defineProps, reactive } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { statustaskoptions } from '../formcolumn/index'
import { PlayIcon, PauseIcon } from 'tdesign-icons-vue-next';
import taskList from './taskList.vue';

const props = defineProps({
	// 默认选中的部门id
	isshow: {
		type: String,
		default: ''
	}
});
const emit = defineEmits(['eventScreening']);

// 获取当前日期
const now = new Date();
// 计算本周一的时间
const startOfWeek = new Date(now);
const dayOfWeek = now.getDay(); // 获取当前是星期几，0 表示星期天
const diff = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // 如果是星期天，回退到前一个星期一
startOfWeek.setDate(now.getDate() - diff);
startOfWeek.setHours(0, 0, 0, 0); // 设置为本周一的00:00:00
// 时间快捷键
const presets = reactive({
	今天: [new Date(), new Date()],
	昨天: [new Date(+new Date() - 86400000), new Date(+new Date() - 86400000)],
	本周: [startOfWeek, new Date()],
	本月: [new Date(new Date().getFullYear(), now.getMonth(), 1, 0, 0, 0, 0), new Date()],
	近7天: [new Date(+new Date() - 86400000 * 6), new Date()],
	近30天: [new Date(+new Date() - 86400000 * 29), new Date()]
});
const disDate = ref({
	before: new Date(+new Date() - 86400000 * 46),
	after: new Date(+new Date() + 86400000 * 46)
});

let formData = reactive({
	name: '',
	speech: '',
	num: '',
	taskstatus: '',
	nowtime: []
});

const form = ref(null);

const FORM_RULES = {
	name: [{ required: true, message: '请输入任务名称' }],
	speech: [{ required: true, message: '请选择场景话术' }],
	taskstatus: [{ required: true, message: '请选择任务状态' }],
	num: [{ required: true, message: '请输入任务编号' }],
	nowtime: [{ required: true, message: '请选择时间范围' }]
};

const visibleCenter = ref(false);
const tasktype = ref('');

const clos = (val) => {
    visibleCenter.value = val
}
//取消
const closefn = () => {
	emit('eventScreening', false);
	form.value.reset();
};
//提交
const onSubmit = ({ validateResult, firstError }) => {
	console.log(formData);

	if (validateResult === true) {
		MessagePlugin.success('操作成功');
		// emit('eventScreening', false);
		console.log(formData);
		console.log(validateResult);
		visibleCenter.value = true;

	} else {
		console.log('Validate Errors: ', firstError, validateResult);
		MessagePlugin.warning(firstError);
	}
};

const taskSubmit = (date) => {
    console.log(date);
	tasktype.value = date;
}

// 禁用 Input 组件，按下 Enter 键时，触发 submit 事件
const onEnter = (_, { e }) => {
	e.preventDefault();
};
</script>

<style lang="scss" scoped>
.buttonbut {
	display: flex;
	justify-content: space-between;
}
.outtimecla {
	display: flex;
	flex-direction: column;
	.outtimecla_item {
		display: flex;
		align-items: center;
		padding-bottom: 10px;
	}
}
.play_pause {
	display: flex;
	justify-content: space-evenly;
}
</style>
